<template>
  <div> 
    <ul style="text-align: left;">
        <h2>新闻列表</h2>
        <li  v-for="(item, index) in newslist" :key="index">
            <!-- <a href="#/detail">{{ item.title }}</a> -->
            <button @click="goDetail(item.id)">{{ item.title }}</button>
            <router-link :to="'/shop/'+item.id" >{{ item.title }}</router-link>
        </li>

        <router-view></router-view>
      
    </ul>

  </div>
</template>

<script>
export default {
    data() {
        return {
            newslist: [
                {
                    "id":"1",
                    "title": "巴黎奥运会开幕式",
                    "createDate": "2024-07-27"
                },

                {
                    "id":"2",
                    "title": "巴黎奥运会开幕式倒计时最后一天",
                    "createDate": "2024-07-26"
                },
                {
                    "id":"3",
                    "title": "巴黎奥运会开幕式倒计时最后二天",
                    "createDate": "2024-07-25"
                },
                {
                    "id":"4",
                    "title": "购物车",
                    "createDate": "2024-07-27"
                },
            ]
        }
    },
    methods: {
        goDetail(id){
            // window.location.href="#/detail";
            //编程式导航
            // console.log(id);
            // debugger
            this.$router.push({ name: 'detail',params:{id} })  
        }
    },
}
</script>

<style>

</style>